<template>
  <div style="background:#ffffff;">
    <Row type="flex" justify="center">
      <Cell :width="24" v-height="300"> </Cell>
      <Cell :width="6">
        <Form ref="form" :validOnChange="validOnChange" :showErrorTip="showErrorTip" :labelWidth="110" :rules="validationRules" :model="model">
          <FormItem label="账 号" prop="name">
            <input type="text" v-model="model.userId" @keyup.enter="submit" />
          </FormItem>
          <FormItem label="密 码" prop="passwd">
            <input type="password" v-model="model.passwd" @keyup.enter="submit" />
          </FormItem>
          <FormItem>
            <Button color="blue" @click="submit">登录</Button>
            <Button @click="registerModel = true">注册</Button>
          </FormItem>
        </Form>
      </Cell>
      <Modal v-model="registerModel" :closeOnMask="true" :hasCloseIcon="true" :hasDivider="true">
        <Form>
          <FormItem label="账号">
            <input type="text" v-model="reg.account" />
          </FormItem>
          <FormItem label="用户姓名">
            <input type="text" v-model="reg.name" />
          </FormItem>
          <FormItem label="手机号">
            <input type="text" v-model="reg.phone" @keyup.enter="register" />
          </FormItem>
          <FormItem label="密码">
            <input type="password" v-model="reg.pass" @keyup.enter="register" />
          </FormItem>
          <FormItem>
            <Button color="blue" @click="register">注册</Button>
          </FormItem>
        </Form>
      </Modal>
    </Row>
  </div>
</template>
<script>
import Sm3 from "crypto-api/src/hasher/sm3";
import { toHex } from "crypto-api/src/encoder/hex";

export default {
  created() {
    if (this.$store.state.LOGIN_FLAG) {
      this.$router.push("/");
      return;
    }
  },
  mounted() { },
  data() {
    return {
      registerModel: false,
      model: {
        userId: "",
        passwd: ""
      },
      reg: {},
      validationRules: {
        required: ["name", "passwd"]
      },
      showErrorTip: true,
      validOnChange: true
    };
  },
  methods: {
    submit() {
      let validResult = this.$refs.form.valid();
      if (validResult.result) {
        let sm3 = new Sm3();
        sm3.update(this.model.passwd);
        //this.$axios.get("/sysparams/getall")
        this.$axios
          .post("/authorized", {
            userId: this.model.userId,
            passwd: toHex(sm3.finalize()).toUpperCase()
          })
          .then(res => {
            if (res.data.code == this.$store.state.SUCCESS) {
              this.$axios.post("/sysparams/getall", {}).then(res => {
                console.log(res.data)
                this.$store.commit("params", res.data.data);
              });
              this.$store.commit("LOGIN_FLAG", true);
              this.$store.commit("loginInfo", {
                loginId: res.data.data.userId,
                loginName: res.data.data.userName
              });
              this.$router.push("/");
            } else {
              this.$Message.error(res.data.msg);
            }
          })
          .catch(err => {
            this.$Message.error(err);
          });
      }
    },
    register() {
      let sm3 = new Sm3();
      sm3.update(this.reg.pass);

      this.$axios
        .post("/register", {
          account: this.reg.account,
          name: this.reg.name,
          phone: this.reg.phone,
          pass: toHex(sm3.finalize()).toUpperCase()
        })
        .then(res => {
          if (res.data.code == this.$store.state.SUCCESS) {
            this.$Message.success(res.data.msg);
            this.registerModel = false;
          } else {
            this.$Message.error(res.data.msg);
          }
        })
        .catch(err => {
          this.$Message.error(err);
        });
    }
  }
};
</script>
